<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0,user-scalable=no">
    <title>学生信息管理系统</title>
    <link rel="stylesheet" href="${pageContext.request.contextPath}/layui/css/layui.css">
    <script src="${pageContext.request.contextPath}/layui/layui.js"></script>
    <script src="${pageContext.request.contextPath}/layui/axios.min.js"></script>
    <script src="${pageContext.request.contextPath}/layui/common.js"></script>

</head>
<body>
<table class="layui-table" lay-filter="job"
       lay-data="{url:'${pageContext.request.contextPath}/student/list', limits: [20, 40], page:true, id:'job', toolbar: '#toolbar'}">
    <thead>
    <tr>
        <th lay-data="{field:'', type: 'checkbox', width:'3%'}">全选/取消</th>
        <th lay-data="{field:'id', width:'10%'}">学号</th>
        <th lay-data="{field:'name', width:'8%'}">学生名</th>
        <th lay-data="{field:'className', width:'10%'}">班级</th>
        <th lay-data="{field:'sex', width:'6%'}">性别</th>
        <th lay-data="{field:'birthday', width:'10%'}">出生日期</th>
        <th lay-data="{field:'major', width:'15%'}">专业</th>
        <th lay-data="{field:'courseNames', width:'20%'}">已选课程</th>
        <th lay-data="{field:'', toolbar: '#barDemo'}">操作</th>
    </tr>
    </thead>
</table>

<script type="text/html" id="toolbar">
    <button type="button" class="layui-btn" lay-event="add"><i class="layui-icon layui-icon-addition"></i>添加学生
    </button>
    <button type="button" class="layui-btn" lay-event="batch-remove"><i class="layui-icon layui-icon-delete"></i>批量删除
    </button>
    <div class="layui-input-inline" style="width: 550px; ">
        <input type="text" name="sno2" placeholder="请输入学生学号" id="search-text"
               class="layui-input" style="width: 400px;display: inline-block;vertical-align: top">
        <button type="button" class="layui-btn" lay-event="search"><i class="layui-icon layui-icon-search"></i>搜索
        </button>
    </div>
</script>


<script type="text/html" id="barDemo">
    <button class="layui-btn layui-btn-xs layui-btn-normal" lay-event="add"><i
            class="layui-icon layui-icon-addition layui-font-12"></i>选课
    </button>
    <button class="layui-btn layui-btn-xs" lay-event="edit"><i class="layui-icon layui-icon-edit layui-font-12"></i>编辑
    </button>
    <button class="layui-btn layui-btn-danger layui-btn-xs " lay-event="del"><i
            class="layui-icon layui-icon-delete layui-font-12"></i>删除
    </button>
</script>

<script>
    layui.use("table", function () {
        let table = layui.table;
        let $ = layui.jquery
        // 给 table 的 toolbar 中定义的 按钮 绑定单击事件
        table.on("toolbar(job)", function (obj) {
            // 获取 单击的按钮类型, 是否为 lay-event="add"
            if (obj.event === 'add') {
                // 弹出添加部门的窗口
                let index = layer.open({
                    type: 2,  // iframe 窗口
                    title: this.innerHTML,  // 弹出窗口的标题
                    content: ['${pageContext.request.contextPath}/student/add', 'no'], // iframe 的 url, no 代表不产生滚动条
                    area: ['800px', '500px'],   // 弹出层的宽高
                    btn: ["保存", "关闭"],
                    btn1: function (index, layero) {
                        // 关闭 弹出层
                        let win = $("iframe", layero)[0].contentWindow
                        win.layui.form.submit()
                        // layer.close(index) ;
                        return false; // 阻止默认行为,关闭窗口
                    }
                })
            } else if (obj.event === "search") {
                // 获取搜索的数据
                let searchText = $("#search-text").val()
                table.reload("job", {where: {sno: searchText}})
            } else if (obj.event === "batch-remove") {
                // 批量删除 、获取 复选框选中的所有数据
                let checkStatus = table.checkStatus('job');
                let ids = checkStatus.data.map(d => d.id)
                if (ids.length == 0) {
                    layer.msg("请至少勾选一个要删除的学生信息");
                    return;
                }
                layer.confirm('您确定要删除选择的所有学生的信息吗？', {icon: 3, title: '提示'}, function (index) {
                    axios.delete("/student/batch/remove", {data: ids}).then(ret => {
                        if (ret.data.status) {
                            layer.close(index);
                            layer.msg("学生信息删除成功")
                            table.reload("job")
                        }
                    })
                });
            }
        })

        // 给 table 表格中 每一列中的 编辑按钮绑定事件
        table.on("tool(job)", function (obj) {
            // 获取 单击的按钮类型, 是否为 lay-event="edit"
            console.log(obj)
            if (obj.event === 'edit') {
                // 弹出添加部门的窗口
                let index = layer.open({
                    type: 2,  // iframe 窗口
                    title: this.innerHTML,  // 弹出窗口的标题
                    content: ['${pageContext.request.contextPath}/student/modify/' + obj.data.id, 'no'], // iframe 的 url, no 代表不产生滚动条
                    area: ['800px', '450px'],   // 弹出层的宽高
                    btn: ["保存", "关闭"],
                    btn1: function (index, layero) {
                        // 关闭 弹出层
                        let win = $("iframe", layero)[0].contentWindow
                        win.layui.form.submit()
                        return false; // 阻止默认行为,关闭窗口
                    }
                })
            } else if (obj.event == "add") {
                let index = layer.open({
                    type: 2,  // iframe 窗口
                    title: this.innerHTML,  // 弹出窗口的标题
                    content: ['${pageContext.request.contextPath}/student/course?id=' + obj.data.id, 'no'], // iframe 的 url, no 代表不产生滚动条
                    area: ['560px', '700px'], // 弹出层的宽高
                    btn: ["保存", "关闭"],
                    btn1: function (index, layero) {
                        // 关闭 弹出层
                        let win = $("iframe", layero)[0].contentWindow
                        win.bindTransferData(index)
                        return false; // 阻止默认行为,关闭窗口
                    }
                })
            } else if (obj.event == "del") {
                layer.confirm('您确定要删除该学生的信息吗？', {icon: 3, title: '提示'}, function (index) {
                    axios.delete("/student/remove/" + obj.data.id).then(ret => {
                        if (ret.data.status) {
                            layer.close(index);
                            layer.msg("学生信息删除成功")
                            table.reload("job")
                        }
                    })

                });
            }
        })
    })
</script>

</body>
</html>
